<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-lswms__orders">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
							<el-form-item>
								<el-input v-model="dataForm.orderkey" size="small" placeholder="出库单号" clearable>
								</el-input>
							</el-form-item>
							<el-form-item>
								<!-- <el-input v-model="dataForm.type" placeholder="单据类型" clearable></el-input> -->
								<el-select size="small" v-model="dataForm.type" placeholder="单据类型">
									<el-option value="" label="--"> </el-option>
									<el-option v-for="item in orderType" :key="item.list" :label="item.listname"
										:value="item.list">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<!-- <el-input v-model="dataForm.status" placeholder="状态" clearable></el-input> -->

								<el-select size="small" v-model="dataForm.status " placeholder="状态">
									<el-option value="" label="--"> </el-option>
									<el-option v-for="item in ordersStatus" :key="item.list" :label="item.listname"
										:value="reString(item.list)">
									</el-option>
								</el-select>
							</el-form-item>
							
							<el-form-item>
								<el-input v-model="dataForm.recipientId" size="small" placeholder="收货人卡ID" clearable>
								</el-input>
							</el-form-item>
							
							<el-form-item>
								<el-input v-model="dataForm.recipient" size="small" placeholder="收货人" clearable>
								</el-input>
							</el-form-item>
							
							<el-form-item>
								<el-button @click="getDataList()" size="small">查询</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="addOrUpdateHandle()"
										   v-if="hasPermission('lswms:orders:save')">新增</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="closeHandleFn()"
										   v-if="hasPermission('lswms:orders:close')">结算订单</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="danger" size="small" @click="deleteHandle()"
										   v-if="hasPermission('lswms:orders:delete')">删除</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="showQc()">扫描新增</el-button>
							</el-form-item>
							<!-- <el-form-item>
								<el-button type="info" size="small" @click="exportHandle()" v-if="hasPermission('lswms:orders:export')">导出</el-button>
							</el-form-item> -->
						</el-form>
						<el-table v-loading="dataListLoading" :data="dataList" border
							@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
							style="width: 100%;">
							<el-table-column type="selection" header-align="center" align="center" width="50">
							</el-table-column>
							<!-- <el-table-column prop="id" label="序号"  header-align="center"
                                           align="center"></el-table-column> -->
							<el-table-column prop="orderkey" label="出库单号" header-align="center" align="center">
							</el-table-column>
							<!-- <el-table-column prop="type" label="单据类型" header-align="center" align="center">
								<template #default="scope">
									<el-select size="mini" v-model="scope.row.type" placeholder="请选择" disabled>
										<el-option v-for="item in orderType" :key="item.list" :label="item.listname"
											:value="item.list">
										</el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column prop="status" label="状态" header-align="center" align="center">
								<template #default="scope">
									<el-select size="mini" v-model="scope.row.status " placeholder="请选择" disabled>
										<el-option v-for="item in ordersStatus" :key="item.list" :label="item.listname"
											:value="reString(item.list)">
										</el-option>
									</el-select>
								</template>
							</el-table-column> -->
							<el-table-column prop="typestr" label="单据类型" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="statusstr" label="状态" header-align="center" align="center">
							</el-table-column>

							<!-- <el-table-column prop="sourcekey" label="来源单号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="sourcetype" label="来源单类型" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="sourcedate" label="来源单时间" header-align="center" align="center">
							</el-table-column> -->
							<el-table-column prop="customerkey" label="客户编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="customername" label="客户名称" header-align="center" align="center">
							</el-table-column>
							
							<el-table-column prop="cardId" label="收货人号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="recipientId" label="收货人卡ID" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="recipient" label="收货人" header-align="center" align="center">
							</el-table-column>
							
							<el-table-column prop="contacts" label="联系人" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="phone" label="电话" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="address" label="地址" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="carno" label="车牌号" header-align="center" align="center">
							</el-table-column>
							<!-- <el-table-column prop="relatedreceiptkey" label="关联单据" header-align="center" align="center">
							</el-table-column> -->
							<!-- <el-table-column prop="remark" label="备注" header-align="center" align="center">
							</el-table-column> -->
							<!-- <el-table-column prop="backstatus" label="回传状态" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="backdate" label="回传时间" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="backresult" label="回传结果" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="backcode" label="回传码" header-align="center" align="center">
							</el-table-column> -->
							<!-- <el-table-column prop="warehouse" label="仓库" header-align="center" align="center">
							</el-table-column> -->
							<el-table-column prop="adduser" label="创建人" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="addtime" label="创建时间" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="updatuser" label="更新人" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="updatetime" label="更新时间" header-align="center" align="center">
							</el-table-column>
							<el-table-column type="expand" fixed="right" label="详情">
								<template #default="props">
									<el-form label-position="left" inline class="demo-table-expand">
										<el-row>
											<el-col :span="4">
												<el-form-item label="供应商名称:">
													<span>{{ props.row.suppliername }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="供应商号:">
													<span>{{ props.row.supplierkey }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="联系人:">
													<span>{{ props.row.contacts }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="电话:" style="">
													<span>{{ props.row.phone }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="8">
												<el-form-item label="地址:">
													<span>{{ props.row.address }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="来源单时间:">
													<span>{{ props.row.sourcedate }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="来源单类型:">
													<span>{{ props.row.sourcetype}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="来源单号:">
													<span>{{ props.row.sourcekey}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="关联单据:">
													<span>{{ props.row.relatedreceiptkey}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="8">
												<el-form-item label="备注:">
													<span>{{ props.row.remark}}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="回传状态:">
													<span>{{ props.row.backstatus}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="回传时间:">
													<span>{{ props.row.backdate}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="回传结果:">
													<span>{{ props.row.backresult}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="回传码:">
													<span>{{ props.row.backcode}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
											</el-col>
											<el-col :span="4">
											</el-col>
										</el-row>
									</el-form>
								</template>
							</el-table-column>

							<el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
								<template #default="scope">
									<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)"
											   v-if="hasPermission('lswms:orders:update')">修改
									</el-button>
									<el-button type="text" size="small" @click="deleteHandle(scope.row.id)"
											   v-if="hasPermission('lswms:orders:delete')">删除
									</el-button>
									<el-button type="text" size="small"
										@click="listHandle(scope.row.id,scope.row.orderkey)">明细</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
							:total="total" layout="total, sizes, prev, pager, next, jumper"
							@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
						</el-pagination>
						<!-- 弹窗, 新增 / 修改 -->
						<ordersAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList">
						</ordersAddOrUpdate>
						<!-- 明细 -->
						<orderdetail v-if="orderdetailVisible" ref="orderdetailvue"></orderdetail>
					</div>
				</el-card>
			</div>
		</div>
		<el-dialog v-model="outerVisible" title="扫描新增">
			<el-form >
				<el-form-item>
					<el-input  v-model="qcdata" placeholder="二维码" type="textarea" :autosize="{ minRows: 8, maxRows: 20}" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="putQcData()">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';
	import ordersAddOrUpdate from "@/components/lswms/orders/OrdersAddOrUpdate";
	import orderdetail from "@/views/lswms/orders/Orderdetail";
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"
	import {
		putAllocation,
		putRelease,
		putDelivery,
		putClose,
		postQcCreate
	} from "@/network/lswms/orders/Orders.js"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {hasPermission} from "@/utils/hasPermission"
	export default {
		name: "orders",

		components: {
			ordersAddOrUpdate,
			orderdetail
		},

		setup() {
			const {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();

			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/orders/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/orders';
				mixinViewModuleOptions.value.exportURL = '/lswms/orders/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
				mixinViewModuleOptions.value.deleteIsBatch = true
				if (mixinViewModuleOptions.value.activatedIsNeed) {
					getDataList();
				}
				ordersStatusFn();
				orderypeFn();
			})

			const ordersStatus = ref("");

			const ordersStatusFn = () => {

				getCodeListByCode('OrderStatus').then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					ordersStatus.value = res.data;
				}).catch((err) => {});
			}

			const orderType = ref("");
			const orderypeFn = () => {
				getCodeListByCode('orderType').then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					orderType.value = res.data;
				}).catch((err) => {});
			}

			const orderdetailVisible = ref(false);
			const orderdetailvue = ref(null);

			//打开list页
			const listHandle = (id, orderkey) => {
				orderdetailVisible.value = true;
				nextTick(function() {
					orderdetailvue.value.dataForm.orderkey = orderkey;
					orderdetailvue.value.init();
				})
			}

			//结算订单
			const closeHandleFn = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请出库单明细行',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定要发货所选的出库单行吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = dataListSelections.value.map(function(item) {
						return {
							"orderkey": item["orderkey"]
						}
					})
					putClose(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})
			}
			
			const qcdata = ref('');
			const outerVisible = ref(false);
			const showQc = () => {
				qcdata.value = '';
				outerVisible.value = true;
			}
			
			const putQcData=()=>{
				if(qcdata.value == ''){
					return ElMessage({
						message: '请录入二维码信息',
						type: 'warning',
						duration: 1000
					});
				}
				postQcCreate({'QC':qcdata.value})
					.then((res)=>{
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
								outerVisible.value = false;
							}
						});
					}).catch()
			}
			

			return {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				ordersStatus,
				orderType,
				orderdetailVisible,
				orderdetailvue,
				listHandle,
				closeHandleFn,
				qcdata,
				outerVisible,
				showQc,
				putQcData
			}
		},
		methods: {
			hasPermission,

			reString: function(val) {
				let n = Number(val)
				if (!isNaN(n)) {
					return n
				} else {
					return val
				}
			}
		}
	}
</script>

<style scoped>

</style>
